<template>
    <div>
        <h2>外卖系统</h2>

        <form v-on:submit.prevent="submitOrder">
            <div>
                <label for="name">姓名:</label>
                <input type="text" v-model="name" required />
            </div>

            <div>
                <label for="phone">电话:</label>
                <input type="tel" v-model="phone" required />
            </div>

            <div>
                <label for="dish">选择菜品:</label>
                <select v-model="Dish" required>
                    <option value="炒菜">炒菜</option>
                    <option value="煮菜">煮菜</option>
                    <option value="生拌">生拌</option>
                    <option value="火烤">火烤</option>
                </select>
            </div>

            <div>
                <label>特殊要求:</label>
                <div>
                    <label>
                        <input type="checkbox" v-model="specialRequests" value="少辣" /> 少辣
                    </label>
                    <label>
                        <input type="checkbox" v-model="specialRequests" value="多葱" /> 多葱
                    </label>
                </div>
            </div>

            <button type="submit">提交订单</button>
        </form>

        <div v-if="orderSummary" class="order-summary">
            <h3>订单信息汇总</h3>
            <p><strong>姓名:</strong> {{ name }}</p>
            <p><strong>电话:</strong> {{ phone }}</p>
            <p><strong>选择的菜品:</strong> {{ Dish }}</p>
            <p><strong>特殊要求:</strong> {{ specialRequests }}</p>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: '',
            phone: '',
            Dish: '',
            specialRequests: [],
            orderSummary: false,
        };
    },
    methods: {
        submitOrder() {
            this.orderSummary = true; // 显示订单信息汇总
        },
    },
}
</script>

<style></style>